<template>
  <el-dialog title="分配权限" :visible="visibleDialog" @close="closeFn">
    <!--
          v-model:绑定的值是数组
          当数组中的元素等于checkbox组件中label的值是时候，会默认选中该复选框。
          当我们勾选中某一个复选框的时候，该复选框label的值就会自动添加到v-model绑定的数组中
       -->
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="item in allList" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
    </el-checkbox-group>
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button size="small" type="primary" @click="sumbit">确认</el-button>
        <el-button size="small" @click="closeFn">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { getAssignRole, editCompileRole } from '@/api/character'
import { getPermissionList } from '@/api/permission'
export default {
  props: {
    visibleDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkList: [], // 选中的选项
      resList: [],
      allList: [], // 所有选项
      userId: '' // 员工id
    }
  },
  async created() {
    const res = await getPermissionList()
    this.allList = res.data
  },
  methods: {
    closeFn() {
      this.$emit('update:visibleDialog', false)
      this.checkList = []
    },
    async sumbit() {
      await editCompileRole({
        id: this.userId,
        permissions: this.checkList
      })
      this.closeFn()
    },
    async getPermission(id) {
      this.userId = id
      const res = await getAssignRole(id)
      this.resList = res.data.permissions
      // console.log(res.data.permissions)
      this.checkList = this.resList.map((item) => { return item.id })
    }
  }
}
</script>
  <style>

  </style>

